<template>
  <div class="audit-process">
    <el-card>
      <tag-content-header search add refresh setting @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span class="title-text">审核流程列表</span>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
        :maxHeight="maxTableHeight"
      >
        <template #auditStatus="{ scope }">
          {{ scope.row.auditStatus ? '启用' : '停用' }}
        </template>
        <template #operation="{ scope }">
          <div class="operation-button-box">
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit('edit', scope.row)"></icon-svg>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
            </el-tooltip>
          </div>
        </template>
      </tag-table>
    </el-card>
    <process-drawer ref="processDrawer" @callback="getList"></process-drawer>
  </div>
</template>

<script>
import processDrawer from './audit-process-drawer'
export default {
  components: {
    processDrawer
  },
  data() {
    return {
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '审批流程名称',
          prop: 'auditName',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '申请方',
          prop: 'applicant',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '状态',
          prop: 'auditStatus',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [{ key: '启用', value: 1 }, { key: '停用', value: 0 }],
          align: 'center'
        },
        {
          show: true,
          label: '备注',
          prop: 'remarks',
          search: true,
          searchKey: ''
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: '200'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  computed: {
    maxTableHeight() {
      // 表格最大高度 =  可视窗口高度 - 顶栏高度50 - 内容容器padding - 页面容器padding和border - 工具栏最小高度 - 描述框高度
      var paddingHeight = 0
      if (this.$route.meta.isTab) {
        paddingHeight = 70
      } else {
        paddingHeight = 30
      }
      var height = this.$store.state.common.documentClientHeight - 50 - paddingHeight - 22 - 40
      return height
    }
  },
  // created() {
  //   this.getList()
  // },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('audit/auditManage/selectManageInfo'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'add':
          // 新增动作
          this.handleEdit()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    handleEdit(type = 'add', scope = {}) {
      this.$refs.processDrawer.showDrawer({ type, scope })
    },
    handleDelete(scope) {
      this.$confirm(`确定删除【${scope.auditName}】?`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`audit/auditManage/${scope.auditId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.msg)
            this.getList()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss"></style>
